<style scoped lang="less">
.typeItemContain2 {
  border: 1px solid #e9eaec;
  border-radius: 4px;
  background: #fff;
  padding: 0px 10px;
  height: 150px;
}
.typeItemContain2:hover {
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
  background: rgba(220, 222, 204, 0.28);
  .kpiContain {
    border-top: 1px solid #c5c8ce !important;
  }
}
.demo-badge-alone {
  background: #3a3636 !important;
}
.badge2 {
  background: #a79f9f !important;
}

/* 单类能源碳排 */

.colTypeContain {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 5px;
  .itemContain {
    margin-bottom: 10px;
    cursor: pointer;
    width: 350px;
    float: left;
    .typeText {
      font-size: 16px;
      padding: 16px 0 0 0;
      font-weight: bold;
    }
    .rowInfo {
      text-align: left;
      // padding-left: 10px;
      padding-top: 10px;
      display: flex;
      .title {
        flex: 0 0 64px;
        color: #aaa;
        font-size: 14px;
      }
      .number {
        flex: 1;
        font-size: 16px;
        text-align: right;
      }
    }
    .kpiContain {
      display: flex;
      text-align: center;
      border-top: 1px solid #e9eaec;
      color: grey;
      font-size: 14px;
      padding: 5px 0;
      .kpiItem {
        flex: 1;
      }
    }
  }
}
.typeItemSelect {
  background: rgba(220, 222, 204, 0.28) !important;
  box-shadow: 0 1px 6px rgba(198, 217, 236, 1);
  .kpiContain {
    border-top: 1px solid #c5c8ce !important;
  }
}

</style>
<template>
  <div>
    <Col span="4" class="colTypeContain">
    <div class="itemContain">
      <Spin size="large" fix v-if="spinShow"></Spin>
      <div class="typeItemContain2" @click="singleItemClick('st'+index)" :id="'st'+index">
        <div class="typeText"> {{name}}</div>
        <div class="rowInfo">
          <div class="title">汇总碳排</div>
          <div class="number">{{values.carbon?numberShow (values.carbon): '0.00'}}</div>
        </div>
        <div class="rowInfo" style="padding-bottom: 8px;">
          <div class="title">单车碳排</div>
          <div class="number">{{values.carbonAvg?numberShow (values.carbonAvg): '0.00'}}</div>
        </div>
        <div class="kpiContain">
          <div class="kpiItem"><span>KPI(年): </span></div>
          <div class="kpiItem"><span>KPI(单): </span></div>
        </div>
      </div>
    </div>
    </Col>
  </div>
</template>
<script>
export default {
  props: {
    index: Number,
    name: String,
    param: Object
  },
  data: function () {
    return {
      values: {},
      spinShow: false
    }
  },
  mounted: function () {
    // console.log('mounted----', 'loadData()', '------name:', this.name)
    // watch的深度监测会触发加载初始数据
    // this.loadData()
  },
  destroyed: function () {
    // console.log('destroyed')
  },
  watch: {
    param: {
      // 不能设置immediate(立即运行)，这会立即触发
      // immediate: true,
      deep: true,
      handler(curVal, oldVal) {
        console.log('watch----', 'loadData()', '------name:', this.name)
        if (JSON.stringify(curVal) === JSON.stringify(oldVal)) {
          console.log('curVal === oldVal--true')
        } else {
          console.log('curVal === oldVal--false')
        }
        this.loadData()
      }
    }
  },
  methods: {
    loadData: function () {
      // 加载数据
      if (this.param.dateStr instanceof Date) {
        this.param.dateStr = this.param.dateStr.format('yyyy-MM-dd')
      }
      this.param.enName = this.name
      this.spinShow = true
      window.myapi.do_post('$carbon/carbon', this.param).then(resp => {
        if (resp.status === 200 && resp.data.status === 200) {
          this.values = resp.data.data
        } else {
          this.$Notice.warning({
            title: '提示',
            desc: resp.data.msg
          })
        }
      }).finally(() => {
        this.spinShow = false
      })
    },
    // 单类能源单击
    singleItemClick: function (id) {
      let existenceObj = document.querySelector('.typeItemSelect')
      if (existenceObj) {
        existenceObj.classList.remove('typeItemSelect')
      }
      document.querySelector('#' + id).classList.add('typeItemSelect')
    },
    // 大数字 千分位显示
    numberShow: function (number) {
      return this.$utils.numberShow(number)
    }
  }
}

</script>
